<template>
  <div class="page">
    <!-- 热门城市 -->
    <van-cell-group>
      <van-cell
        v-for="city in hotCityList"
        :key="city.cityId"
        :title="city.name"
        @click="jump(city)"
      />
    </van-cell-group>

    <van-index-bar :index-list="indexList">
      <template v-for="group in cityGroup" :key="group.title">
        <van-index-anchor :index="group.title" />
        <van-cell
          v-for="city in group.list"
          :key="city.cityId"
          :title="city.name"
          @click="jump(city)"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useStore } from '@/hooks'
import type { City } from '@/api/interface'

const router = useRouter()
const { cityStore } = useStore()
const { indexList, cityGroup, hotCityList } = storeToRefs(cityStore)

cityStore.getCities()
cityStore.getCity()

function jump(city: City.Item) {
  cityStore.setCity(city)

  router.back()
}
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  overflow-y: auto;
}
</style>
